<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <UBasePage>
    <div
      class="bg-primary text-white w-full top-0 z-200 fixed font-bold"
      :style="{ height: `${customBarHeight}px` }"
    >
      <div
        :style="{
          'padding-top': `${statusBarHeight}px`,
          height: `${customBarHeight - statusBarHeight}px`,
        }"
      >
        <div class="h-full text-center px-6 relative">
          <div class="h-full text-xl left-4 i-carbon-add absolute" @click="handleCreateCourse" />
          <div
            class="flex h-full mx-auto justify-center items-center inline-block text-lg"
            @click="showCourseAction = !showCourseAction"
          >
            {{ `第${currentWeekIndex + 1}周${!isStart ? '(未开学)' : ''}` }}
            <div
              class="transition-transform duration-300 i-carbon-chevron-up"
              :class="showCourseAction ? 'rotate-180' : 'rotate-0'"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- timetable main content -->
    <TimetableContent
      :show-course-action="showCourseAction"
      @course-item-click="handleShowActionSheet"
    />
    <!-- course card -->
    <CourseActionSheet
      :show-action-sheet="showActionSheet"
      :course-item="clickedCourseItem"
      @cancel="handleCloseActionSheet"
    />
  </UBasePage>
</template>

<script setup>
// 获取屏幕边界到安全区域距离
import { useCourseStore } from '@/store/course'
import CourseActionSheet from '@/components/timetable/CourseActionSheet.vue'
import TimetableContent from '@/components/timetable/TimetableContent.vue'
import { courses } from '@/static/courses.js'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
const { customBarHeight, statusBarHeight } = useAppStore()

const { safeAreaInsets } = uni.getSystemInfoSync()

const { currentWeekIndex, isStart } = storeToRefs(useCourseStore())
const { setCourseList, setStartDay } = useCourseStore()

onShow(() => {})

const showCourseAction = ref(false)

// set the start date
const someDate = new Date()

someDate.setDate(someDate.getDate() + -1 * 7)

setStartDay(someDate)

setCourseList(courses)

function handleCreateCourse() {
  uni.navigateTo({
    url: '/pages/detail/detail',
  })
}

// handle course item click
const showActionSheet = ref(false)
const clickedCourseItem = ref()

function handleShowActionSheet(courseItem) {
  showActionSheet.value = true
  clickedCourseItem.value = courseItem
}

function handleCloseActionSheet() {
  showActionSheet.value = false
}
</script>

<style>
.main-title-color {
  color: #d14328;
}
</style>
